import { useModel } from '@umijs/max';
import { Image, Space } from 'antd';
import React, { useEffect, useState } from 'react';

interface LogoProps {
    dark: boolean;
    collapsed: boolean;
}

export default (props: LogoProps) => {
    const { initialState } = useModel('@@initialState');
    const { collapsed = false } = props;
    const [display, setDisplay] = useState('block');

    const textColor = initialState?.settings.navTheme === 'realDark' ? '#FFFFFF' : '#001529';
    useEffect(() => {
        if (collapsed) {
            setDisplay('none');
        } else {
            setTimeout(() => {
                setDisplay('block');
            }, 50);
        }
    }, [collapsed]);
    return (
        <Space
            style={{
                height: initialState?.settings.headerHeight,
                paddingLeft: 20,
                // boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.2)',
            }}
        >
            <Image width={40} height={40} preview={false} src={'/logo_color.svg'} />{' '}
            <h1
                style={{
                    color: textColor,
                    height: '56px',
                    lineHeight: '56px',
                    margin: 0,
                    display: display,
                }}
            >
                DevOps
            </h1>
        </Space>
    );
};
